<template>
  <div class="table-main">
    <div class="item table-main-search">
      <u--input
        v-model="params.businessName"
        placeholder="请输入商圈名称"
      />
      <u-button type="primary" @click="initModalList">搜索</u-button>
      <u-button @click="onClickReset">重置</u-button>
    </div>
    <div class="table-panel item">
      <table-panel
        ref="tablePanelRefs"
        bindKey="pagePath"
        @onSelect="onSelectModel"
        :table-data="tableData"
        :table-head="column"
      />
    </div>
    <div class="table-pagination">
      <uni-pagination
        :total="total"
        :current="params.page"
        :pageSize="params.pageSize"
        @change="onChangePage"
      />
    </div>
    <div class="item table-confirm">
      <u-cell-group>
        <u-cell :border="false">
          <div class="u-slot-title flexAIC" slot="value">
            <u-button
              plain
              size="small"
              style="margin-right: 10px"
              @click="cancel"
              >取消</u-button
            >
            <u-button type="primary" size="small" @click="onClickSelectTable"
              >确定</u-button
            >
          </div>
        </u-cell>
      </u-cell-group>
    </div>
  </div>
</template>

<script>
import TablePanel from "@/components/TablePanel";
import { getNearList } from "@/service/api/widget";
import { getBusinessDistrictList } from "@/service/api/lowcode";

export default {
  name: "system-page",
  components: { TablePanel },
  props: {
    active: String,
  },
  data() {
    return {
      basePath: "pages/sp-store/pages/business-district-index-page/index",
      tableData: [],
      column: [
        {
          label: "商圈名称",
          prop: "businessName",
        },
        {
          label: "入驻时间",
          prop: "enterTime",
        },
        {
          label: "选择",
          prop: "select",
        },
      ],
      total: 0,
      params: {
        pubTag: 1,
        businessName: "",
        industry: "",
        mobilePhone: "",
        page: 1,
        pageSize: 10,
        status: "",
      },
      tempNavigateOptions: {
        path: "",
        name: "",
        navigateFrom: this.active,
      },
    };
  },
  created() {
    this.initModalList();
  },
  methods: {
    onChangePage(e) {
      this.params.page = e.current;
      this.$nextTick(() => {
        this.initModalList();
      });
    },
    async initModalList() {
      const { list, total } = await getBusinessDistrictList({
        ...this.params,
      });
      list.map((v) => {
        v.pagePath = `${this.basePath}?shopId=${v.pubDomainMainShopId}`;
      });
      this.tableData = list || [];
      this.total = total || 0;
    },
    onClickReset() {
      this.params = {
        pubTag: 1,
        businessName: "",
        industry: "",
        mobilePhone: "",
        page: 1,
        pageSize: 10,
        status: "",
      };
      this.$nextTick(() => {
        this.initModalList();
      });
    },
    onSelectModel(e) {
      if (e) {
        this.tempNavigateOptions.path = e.pagePath;
        this.tempNavigateOptions.name = "商圈主页-" + e.businessName;
      }
    },

    onClickSelectTable() {
      this.$emit("confirm", this.tempNavigateOptions);
    },
    cancel() {
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped lang="scss">
.u-slot-title {
  width: 100%;
  justify-content: center;
  .u-button {
    width: 100px;
    margin: 0;
  }
}
.table-main {
  padding: 20px 20px 0 20px;
  .table-panel {
    margin-top: 10px;
  }
  .table-pagination {
    margin-top: 10px;
  }
  .table-confirm {
    display: flex;
    justify-content: flex-end;
    &-btn {
      width: 100px;
    }
  }
  &-search {
    display: flex;
    .u-button {
      width: 100px;
      margin-left: 10px;
    }
  }
  &-header {
    position: relative;
    width: 100%;
    &-close {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
